import {
  Box,
  Flex,
  Input,
  IconButton,
  useColorModeValue,
  Textarea,
  Text
} from '@chakra-ui/react';
import { useState, useRef, useEffect } from 'react';
import { FiSend, FiMic } from 'react-icons/fi';

export interface ChatInputProps {
  onSendMessage: (message: string) => void;
  disabled?: boolean;
  placeholder?: string;
}

export const ChatInput = ({ 
  onSendMessage, 
  disabled = false, 
  placeholder = "输入您的问题..." 
}: ChatInputProps) => {
  const [message, setMessage] = useState('');
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const bgColor = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  const handleSendMessage = () => {
    if (message.trim() && !disabled) {
      onSendMessage(message.trim());
      setMessage('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSendMessage();
    }
  };

  return (
    <Box p={4} bg={bgColor} borderTop="1px" borderColor={borderColor}>
      <Flex direction="column" gap={2}>
        <Flex align="flex-end" gap={2}>
          <Textarea
            ref={inputRef}
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            onKeyDown={handleKeyDown}
            placeholder={placeholder}
            disabled={disabled}
            size="md"
            resize="none"
            rows={1}
            minH="40px"
            maxH="120px"
            borderRadius="md"
            flexGrow={1}
            _focus={{
              borderColor: 'blue.400',
              boxShadow: '0 0 0 1px var(--chakra-colors-blue-400)',
            }}
          />
          <IconButton
            aria-label="发送消息"
            icon={<FiSend />}
            isDisabled={!message.trim() || disabled}
            onClick={handleSendMessage}
            colorScheme="blue"
          />
        </Flex>
        <Text fontSize="xs" color="gray.500" textAlign="right">
          按Enter发送，Shift+Enter换行
        </Text>
      </Flex>
    </Box>
  );
};

export default ChatInput; 